<html>
<head>
<script src="../../resources/js-test.js"></script>
<style>
@font-face {
    font-family: Test1;
    src: url('../../resources/Ahem.ttf');
    unicode-range: U+41-5A;  /* 'A'-'Z' */
}
@font-face {
    font-family: Test1;
    src: url('../../resources/Ahem.otf');
    unicode-range: U+49;  /* 'I' */
}
@font-face {
    font-family: Test2;
    src: url('../../resources/Ahem.woff');
    unicode-range: U+41-5A;  /* 'A'-'Z' */
}
@font-face {
    font-family: Test2;
    src: url('../../resources/Ahem.woff2');
    unicode-range: U+49;  /* 'I' */
}
@font-face {
    font-family: Test3;
    src: url('../../resources/Ahem.ttf');
    /* no unicode-range */
}
@font-face {
    font-family: Test3;
    src: url('../../resources/Ahem.otf');
    unicode-range: U+00-FF;
}
</style>
<script>
description('Tests that only necessary fonts are loaded when font faces have overlapping unicode ranges.');

window.jsTestIsAsync = true;

function getDocumentFontFaces() {
    var faces = [];
    document.fonts.forEach(function(face) { faces.push(face); });
    return faces;
}

document.fonts.ready.then(function() {
    faces = getDocumentFontFaces();
    shouldBe('faces.length', '6');
    shouldBeEqualToString('faces[0].status', 'unloaded');
    shouldBeEqualToString('faces[1].status', 'loaded');
    shouldBeEqualToString('faces[2].status', 'loaded');
    shouldBeEqualToString('faces[3].status', 'unloaded');
    shouldBeEqualToString('faces[4].status', 'unloaded');
    shouldBeEqualToString('faces[5].status', 'loaded');
    finishJSTest();
});
</script>
</head>
<body>
  <p style="font-family: Test1">I</p>
  <p style="font-family: Test2">J</p>
  <p style="font-family: Test3">K</p>
</body>
</html>
